<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>iconfont Demo</title>
        <link
            rel="shortcut icon"
            href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"
            type="image/x-icon"
        />
        <link
            rel="icon"
            type="image/svg+xml"
            href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"
        />
        <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css" />
        <link rel="stylesheet" href="demo.css" />
        <link rel="stylesheet" href="iconfont.css" />
        <script src="iconfont.js"></script>
        <!-- jQuery -->
        <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
        <!-- 代码高亮 -->
        <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
        <style>
            .main .logo {
                margin-top: 0;
                height: auto;
            }

            .main .logo a {
                display: flex;
                align-items: center;
            }

            .main .logo .sub-title {
                margin-left: 0.5em;
                font-size: 22px;
                color: #fff;
                background: linear-gradient(-45deg, #3967ff, #b500fe);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }
        </style>
    </head>
    <body>
        <div class="main">
            <h1 class="logo"
                ><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
                    <img
                        width="200"
                        src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg"
                    /> </a
            ></h1>
            <div class="nav-tabs">
                <ul id="tabs" class="dib-box">
                    <li class="dib active"><span>Unicode</span></li>
                    <li class="dib"><span>Font class</span></li>
                    <li class="dib"><span>Symbol</span></li>
                </ul>

                <a
                    href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3817453"
                    target="_blank"
                    class="nav-more"
                    >查看项目</a
                >
            </div>
            <div class="tab-container">
                <div class="content unicode" style="display: block">
                    <ul class="icon_lists dib-box">
                        <li class="dib">
                            <span class="icon iconfont">&#xe672;</span>
                            <div class="name">感叹号</div>
                            <div class="code-name">&amp;#xe672;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe603;</span>
                            <div class="name">发起</div>
                            <div class="code-name">&amp;#xe603;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe638;</span>
                            <div class="name">通知公告-01</div>
                            <div class="code-name">&amp;#xe638;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe763;</span>
                            <div class="name">信息</div>
                            <div class="code-name">&amp;#xe763;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe628;</span>
                            <div class="name">查看</div>
                            <div class="code-name">&amp;#xe628;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe61e;</span>
                            <div class="name">日期</div>
                            <div class="code-name">&amp;#xe61e;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe63c;</span>
                            <div class="name">HTSCIT_点赞</div>
                            <div class="code-name">&amp;#xe63c;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe643;</span>
                            <div class="name">待办</div>
                            <div class="code-name">&amp;#xe643;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe611;</span>
                            <div class="name">new</div>
                            <div class="code-name">&amp;#xe611;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe612;</span>
                            <div class="name">装饰 刷子-2</div>
                            <div class="code-name">&amp;#xe612;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe60d;</span>
                            <div class="name">会议室管理icon</div>
                            <div class="code-name">&amp;#xe60d;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe667;</span>
                            <div class="name">眼睛</div>
                            <div class="code-name">&amp;#xe667;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe74f;</span>
                            <div class="name">时钟</div>
                            <div class="code-name">&amp;#xe74f;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe936;</span>
                            <div class="name">48银行卡</div>
                            <div class="code-name">&amp;#xe936;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe62f;</span>
                            <div class="name">默认头像</div>
                            <div class="code-name">&amp;#xe62f;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xfe48;</span>
                            <div class="name">学历</div>
                            <div class="code-name">&amp;#xfe48;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe725;</span>
                            <div class="name">关闭2</div>
                            <div class="code-name">&amp;#xe725;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe8bb;</span>
                            <div class="name">关闭小</div>
                            <div class="code-name">&amp;#xe8bb;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe734;</span>
                            <div class="name">文件-借款申请</div>
                            <div class="code-name">&amp;#xe734;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe736;</span>
                            <div class="name">文件-账单</div>
                            <div class="code-name">&amp;#xe736;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe657;</span>
                            <div class="name">分享</div>
                            <div class="code-name">&amp;#xe657;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe635;</span>
                            <div class="name">导入</div>
                            <div class="code-name">&amp;#xe635;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe63b;</span>
                            <div class="name">刷新</div>
                            <div class="code-name">&amp;#xe63b;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe6fa;</span>
                            <div class="name">文件</div>
                            <div class="code-name">&amp;#xe6fa;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe66b;</span>
                            <div class="name">image</div>
                            <div class="code-name">&amp;#xe66b;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe66d;</span>
                            <div class="name">JPEG</div>
                            <div class="code-name">&amp;#xe66d;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe671;</span>
                            <div class="name">DOC</div>
                            <div class="code-name">&amp;#xe671;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe673;</span>
                            <div class="name">XLS</div>
                            <div class="code-name">&amp;#xe673;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe679;</span>
                            <div class="name">MP4</div>
                            <div class="code-name">&amp;#xe679;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe69f;</span>
                            <div class="name">PNG</div>
                            <div class="code-name">&amp;#xe69f;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe6a2;</span>
                            <div class="name">EXCEL</div>
                            <div class="code-name">&amp;#xe6a2;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe6a3;</span>
                            <div class="name">PPT</div>
                            <div class="code-name">&amp;#xe6a3;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe6a4;</span>
                            <div class="name">word</div>
                            <div class="code-name">&amp;#xe6a4;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe6a5;</span>
                            <div class="name">JPG</div>
                            <div class="code-name">&amp;#xe6a5;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe6e4;</span>
                            <div class="name">PDF</div>
                            <div class="code-name">&amp;#xe6e4;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe66a;</span>
                            <div class="name">下载</div>
                            <div class="code-name">&amp;#xe66a;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xec7d;</span>
                            <div class="name">图片添加</div>
                            <div class="code-name">&amp;#xec7d;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe9ce;</span>
                            <div class="name">长沙银行</div>
                            <div class="code-name">&amp;#xe9ce;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe653;</span>
                            <div class="name">银行-建设</div>
                            <div class="code-name">&amp;#xe653;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe654;</span>
                            <div class="name">银行-交通</div>
                            <div class="code-name">&amp;#xe654;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe655;</span>
                            <div class="name">银行-农行</div>
                            <div class="code-name">&amp;#xe655;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe650;</span>
                            <div class="name">银行-中国银行</div>
                            <div class="code-name">&amp;#xe650;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe651;</span>
                            <div class="name">银行-工商</div>
                            <div class="code-name">&amp;#xe651;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe652;</span>
                            <div class="name">银行-招商</div>
                            <div class="code-name">&amp;#xe652;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe661;</span>
                            <div class="name">企业</div>
                            <div class="code-name">&amp;#xe661;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe662;</span>
                            <div class="name">后台管理员</div>
                            <div class="code-name">&amp;#xe662;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe663;</span>
                            <div class="name">企业2</div>
                            <div class="code-name">&amp;#xe663;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe664;</span>
                            <div class="name">测试人员</div>
                            <div class="code-name">&amp;#xe664;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe665;</span>
                            <div class="name">测试人员 2</div>
                            <div class="code-name">&amp;#xe665;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe666;</span>
                            <div class="name">后台管理员2</div>
                            <div class="code-name">&amp;#xe666;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe601;</span>
                            <div class="name">更多</div>
                            <div class="code-name">&amp;#xe601;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe627;</span>
                            <div class="name">更多</div>
                            <div class="code-name">&amp;#xe627;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe6b0;</span>
                            <div class="name">切换</div>
                            <div class="code-name">&amp;#xe6b0;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe8e9;</span>
                            <div class="name">306问号-线性圆框</div>
                            <div class="code-name">&amp;#xe8e9;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe600;</span>
                            <div class="name">删除2</div>
                            <div class="code-name">&amp;#xe600;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe6dc;</span>
                            <div class="name">新增</div>
                            <div class="code-name">&amp;#xe6dc;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe8d6;</span>
                            <div class="name">搜索小</div>
                            <div class="code-name">&amp;#xe8d6;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe634;</span>
                            <div class="name">导出</div>
                            <div class="code-name">&amp;#xe634;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe626;</span>
                            <div class="name">删除</div>
                            <div class="code-name">&amp;#xe626;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe6c5;</span>
                            <div class="name">KHCFDC_编辑</div>
                            <div class="code-name">&amp;#xe6c5;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe656;</span>
                            <div class="name">新增</div>
                            <div class="code-name">&amp;#xe656;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe795;</span>
                            <div class="name">137设置、系统设置、功能设置、属性-线</div>
                            <div class="code-name">&amp;#xe795;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe602;</span>
                            <div class="name">3.1首页</div>
                            <div class="code-name">&amp;#xe602;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe636;</span>
                            <div class="name">jiaobiao</div>
                            <div class="code-name">&amp;#xe636;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe64f;</span>
                            <div class="name">购物车</div>
                            <div class="code-name">&amp;#xe64f;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe642;</span>
                            <div class="name">人力资源主题分析</div>
                            <div class="code-name">&amp;#xe642;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe670;</span>
                            <div class="name">组织机构</div>
                            <div class="code-name">&amp;#xe670;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe669;</span>
                            <div class="name">消息</div>
                            <div class="code-name">&amp;#xe669;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe619;</span>
                            <div class="name">银行卡</div>
                            <div class="code-name">&amp;#xe619;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe615;</span>
                            <div class="name">资金</div>
                            <div class="code-name">&amp;#xe615;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe637;</span>
                            <div class="name">more</div>
                            <div class="code-name">&amp;#xe637;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe610;</span>
                            <div class="name">行政处罚</div>
                            <div class="code-name">&amp;#xe610;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe625;</span>
                            <div class="name">产品</div>
                            <div class="code-name">&amp;#xe625;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe631;</span>
                            <div class="name">说明</div>
                            <div class="code-name">&amp;#xe631;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe609;</span>
                            <div class="name">平台管理</div>
                            <div class="code-name">&amp;#xe609;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7b7;</span>
                            <div class="name">选中角标</div>
                            <div class="code-name">&amp;#xe7b7;</div>
                        </li>
                    </ul>
                    <div class="article markdown">
                        <h2 id="unicode-">Unicode 引用</h2>
                        <hr />

                        <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
                        <ul>
                            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
                            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
                        </ul>
                        <blockquote>
                            <p
                                >注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol
                                引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p
                            >
                        </blockquote>
                        <p>Unicode 使用步骤如下：</p>
                        <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
                        <pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1678955819451') format('woff2'),
       url('iconfont.woff?t=1678955819451') format('woff'),
       url('iconfont.ttf?t=1678955819451') format('truetype');
}
</code></pre>
                        <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
                        <pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
                        <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
                        <pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
                        <blockquote>
                            <p
                                >"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是
                                "iconfont"。</p
                            >
                        </blockquote>
                    </div>
                </div>
                <div class="content font-class">
                    <ul class="icon_lists dib-box">
                        <li class="dib">
                            <span class="icon iconfont icon-gantanhao"></span>
                            <div class="name"> 感叹号 </div>
                            <div class="code-name">.icon-gantanhao </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-faqi"></span>
                            <div class="name"> 发起 </div>
                            <div class="code-name">.icon-faqi </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-tongzhigonggao-01"></span>
                            <div class="name"> 通知公告-01 </div>
                            <div class="code-name">.icon-tongzhigonggao-01 </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-xinxi"></span>
                            <div class="name"> 信息 </div>
                            <div class="code-name">.icon-xinxi </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-chakan"></span>
                            <div class="name"> 查看 </div>
                            <div class="code-name">.icon-chakan </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-riqi"></span>
                            <div class="name"> 日期 </div>
                            <div class="code-name">.icon-riqi </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-dianzan"></span>
                            <div class="name"> HTSCIT_点赞 </div>
                            <div class="code-name">.icon-dianzan </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-daiban"></span>
                            <div class="name"> 待办 </div>
                            <div class="code-name">.icon-daiban </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-new"></span>
                            <div class="name"> new </div>
                            <div class="code-name">.icon-new </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-zhuangshishuazi-2"></span>
                            <div class="name"> 装饰 刷子-2 </div>
                            <div class="code-name">.icon-zhuangshishuazi-2 </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-huiyishiguanliicon"></span>
                            <div class="name"> 会议室管理icon </div>
                            <div class="code-name">.icon-huiyishiguanliicon </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-yanjing"></span>
                            <div class="name"> 眼睛 </div>
                            <div class="code-name">.icon-yanjing </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-shizhong"></span>
                            <div class="name"> 时钟 </div>
                            <div class="code-name">.icon-shizhong </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-yinhangqia1"></span>
                            <div class="name"> 48银行卡 </div>
                            <div class="code-name">.icon-yinhangqia1 </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-morentouxiang"></span>
                            <div class="name"> 默认头像 </div>
                            <div class="code-name">.icon-morentouxiang </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-xueli"></span>
                            <div class="name"> 学历 </div>
                            <div class="code-name">.icon-xueli </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-guanbi2"></span>
                            <div class="name"> 关闭2 </div>
                            <div class="code-name">.icon-guanbi2 </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-guanbixiao"></span>
                            <div class="name"> 关闭小 </div>
                            <div class="code-name">.icon-guanbixiao </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-wj-jksq"></span>
                            <div class="name"> 文件-借款申请 </div>
                            <div class="code-name">.icon-wj-jksq </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-wj-zd"></span>
                            <div class="name"> 文件-账单 </div>
                            <div class="code-name">.icon-wj-zd </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-fenxiang"></span>
                            <div class="name"> 分享 </div>
                            <div class="code-name">.icon-fenxiang </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-daoru"></span>
                            <div class="name"> 导入 </div>
                            <div class="code-name">.icon-daoru </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-shuaxin"></span>
                            <div class="name"> 刷新 </div>
                            <div class="code-name">.icon-shuaxin </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-047-file"></span>
                            <div class="name"> 文件 </div>
                            <div class="code-name">.icon-047-file </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-image"></span>
                            <div class="name"> image </div>
                            <div class="code-name">.icon-image </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-JPEG"></span>
                            <div class="name"> JPEG </div>
                            <div class="code-name">.icon-JPEG </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-DOC"></span>
                            <div class="name"> DOC </div>
                            <div class="code-name">.icon-DOC </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-XLS"></span>
                            <div class="name"> XLS </div>
                            <div class="code-name">.icon-XLS </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-MP4"></span>
                            <div class="name"> MP4 </div>
                            <div class="code-name">.icon-MP4 </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-PNG"></span>
                            <div class="name"> PNG </div>
                            <div class="code-name">.icon-PNG </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-EXCEL"></span>
                            <div class="name"> EXCEL </div>
                            <div class="code-name">.icon-EXCEL </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-PPT"></span>
                            <div class="name"> PPT </div>
                            <div class="code-name">.icon-PPT </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-word"></span>
                            <div class="name"> word </div>
                            <div class="code-name">.icon-word </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-JPG"></span>
                            <div class="name"> JPG </div>
                            <div class="code-name">.icon-JPG </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-PDF"></span>
                            <div class="name"> PDF </div>
                            <div class="code-name">.icon-PDF </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-xiazai1"></span>
                            <div class="name"> 下载 </div>
                            <div class="code-name">.icon-xiazai1 </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-tupiantianjia"></span>
                            <div class="name"> 图片添加 </div>
                            <div class="code-name">.icon-tupiantianjia </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-yinhanglogo-"></span>
                            <div class="name"> 长沙银行 </div>
                            <div class="code-name">.icon-yinhanglogo- </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-yinhang-jianshe"></span>
                            <div class="name"> 银行-建设 </div>
                            <div class="code-name">.icon-yinhang-jianshe </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-yinhang-jiaotong"></span>
                            <div class="name"> 银行-交通 </div>
                            <div class="code-name">.icon-yinhang-jiaotong </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-yinhang-nonghang"></span>
                            <div class="name"> 银行-农行 </div>
                            <div class="code-name">.icon-yinhang-nonghang </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-yinhang-zhongguoyinhang"></span>
                            <div class="name"> 银行-中国银行 </div>
                            <div class="code-name">.icon-yinhang-zhongguoyinhang </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-yinhang-gongshang"></span>
                            <div class="name"> 银行-工商 </div>
                            <div class="code-name">.icon-yinhang-gongshang </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-yinhang-zhaoshang"></span>
                            <div class="name"> 银行-招商 </div>
                            <div class="code-name">.icon-yinhang-zhaoshang </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-qiye"></span>
                            <div class="name"> 企业 </div>
                            <div class="code-name">.icon-qiye </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-houtaiguanliyuan"></span>
                            <div class="name"> 后台管理员 </div>
                            <div class="code-name">.icon-houtaiguanliyuan </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-qiye2"></span>
                            <div class="name"> 企业2 </div>
                            <div class="code-name">.icon-qiye2 </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-ceshirenyuan"></span>
                            <div class="name"> 测试人员 </div>
                            <div class="code-name">.icon-ceshirenyuan </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-a-ceshirenyuan2"></span>
                            <div class="name"> 测试人员 2 </div>
                            <div class="code-name">.icon-a-ceshirenyuan2 </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-houtaiguanliyuan2"></span>
                            <div class="name"> 后台管理员2 </div>
                            <div class="code-name">.icon-houtaiguanliyuan2 </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-gengduo"></span>
                            <div class="name"> 更多 </div>
                            <div class="code-name">.icon-gengduo </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-19"></span>
                            <div class="name"> 更多 </div>
                            <div class="code-name">.icon-19 </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-qiehuan"></span>
                            <div class="name"> 切换 </div>
                            <div class="code-name">.icon-qiehuan </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-wenhao-xianxingyuankuang"></span>
                            <div class="name"> 306问号-线性圆框 </div>
                            <div class="code-name">.icon-wenhao-xianxingyuankuang </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-shanchu2"></span>
                            <div class="name"> 删除2 </div>
                            <div class="code-name">.icon-shanchu2 </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-xinzeng"></span>
                            <div class="name"> 新增 </div>
                            <div class="code-name">.icon-xinzeng </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-sousuoxiao"></span>
                            <div class="name"> 搜索小 </div>
                            <div class="code-name">.icon-sousuoxiao </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-daochu"></span>
                            <div class="name"> 导出 </div>
                            <div class="code-name">.icon-daochu </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-shanchu"></span>
                            <div class="name"> 删除 </div>
                            <div class="code-name">.icon-shanchu </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-bianji"></span>
                            <div class="name"> KHCFDC_编辑 </div>
                            <div class="code-name">.icon-bianji </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-xinzeng1"></span>
                            <div class="name"> 新增 </div>
                            <div class="code-name">.icon-xinzeng1 </div>
                        </li>

                        <li class="dib">
                            <span
                                class="icon iconfont icon-shezhixitongshezhigongnengshezhishuxing-xian"
                            ></span>
                            <div class="name"> 137设置、系统设置、功能设置、属性-线 </div>
                            <div class="code-name"
                                >.icon-shezhixitongshezhigongnengshezhishuxing-xian
                            </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-shouye"></span>
                            <div class="name"> 3.1首页 </div>
                            <div class="code-name">.icon-shouye </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-jiaobiao"></span>
                            <div class="name"> jiaobiao </div>
                            <div class="code-name">.icon-jiaobiao </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-gouwuche"></span>
                            <div class="name"> 购物车 </div>
                            <div class="code-name">.icon-gouwuche </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-renliziyuanzhutifenxi"></span>
                            <div class="name"> 人力资源主题分析 </div>
                            <div class="code-name">.icon-renliziyuanzhutifenxi </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-zuzhijigou"></span>
                            <div class="name"> 组织机构 </div>
                            <div class="code-name">.icon-zuzhijigou </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-xiaoxi"></span>
                            <div class="name"> 消息 </div>
                            <div class="code-name">.icon-xiaoxi </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-yinhangqia"></span>
                            <div class="name"> 银行卡 </div>
                            <div class="code-name">.icon-yinhangqia </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-zijin"></span>
                            <div class="name"> 资金 </div>
                            <div class="code-name">.icon-zijin </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-more"></span>
                            <div class="name"> more </div>
                            <div class="code-name">.icon-more </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-hangzhengchufa"></span>
                            <div class="name"> 行政处罚 </div>
                            <div class="code-name">.icon-hangzhengchufa </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-chanpin"></span>
                            <div class="name"> 产品 </div>
                            <div class="code-name">.icon-chanpin </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-shuoming"></span>
                            <div class="name"> 说明 </div>
                            <div class="code-name">.icon-shuoming </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-pingtaiguanli"></span>
                            <div class="name"> 平台管理 </div>
                            <div class="code-name">.icon-pingtaiguanli </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-xuanzhongjiaobiao"></span>
                            <div class="name"> 选中角标 </div>
                            <div class="code-name">.icon-xuanzhongjiaobiao </div>
                        </li>
                    </ul>
                    <div class="article markdown">
                        <h2 id="font-class-">font-class 引用</h2>
                        <hr />

                        <p
                            >font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode
                            书写不直观，语意不明确的问题。</p
                        >
                        <p>与 Unicode 使用方式相比，具有如下特点：</p>
                        <ul>
                            <li
                                >相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon
                                是什么。</li
                            >
                            <li
                                >因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class
                                里面的 Unicode 引用。</li
                            >
                        </ul>
                        <p>使用步骤如下：</p>
                        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
                        <pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
                        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
                        <pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
                        <blockquote>
                            <p
                                >" iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是
                                "iconfont"。</p
                            >
                        </blockquote>
                    </div>
                </div>
                <div class="content symbol">
                    <ul class="icon_lists dib-box">
                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-gantanhao"></use>
                            </svg>
                            <div class="name">感叹号</div>
                            <div class="code-name">#icon-gantanhao</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-faqi"></use>
                            </svg>
                            <div class="name">发起</div>
                            <div class="code-name">#icon-faqi</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-tongzhigonggao-01"></use>
                            </svg>
                            <div class="name">通知公告-01</div>
                            <div class="code-name">#icon-tongzhigonggao-01</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-xinxi"></use>
                            </svg>
                            <div class="name">信息</div>
                            <div class="code-name">#icon-xinxi</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-chakan"></use>
                            </svg>
                            <div class="name">查看</div>
                            <div class="code-name">#icon-chakan</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-riqi"></use>
                            </svg>
                            <div class="name">日期</div>
                            <div class="code-name">#icon-riqi</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-dianzan"></use>
                            </svg>
                            <div class="name">HTSCIT_点赞</div>
                            <div class="code-name">#icon-dianzan</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-daiban"></use>
                            </svg>
                            <div class="name">待办</div>
                            <div class="code-name">#icon-daiban</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-new"></use>
                            </svg>
                            <div class="name">new</div>
                            <div class="code-name">#icon-new</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-zhuangshishuazi-2"></use>
                            </svg>
                            <div class="name">装饰 刷子-2</div>
                            <div class="code-name">#icon-zhuangshishuazi-2</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-huiyishiguanliicon"></use>
                            </svg>
                            <div class="name">会议室管理icon</div>
                            <div class="code-name">#icon-huiyishiguanliicon</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-yanjing"></use>
                            </svg>
                            <div class="name">眼睛</div>
                            <div class="code-name">#icon-yanjing</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-shizhong"></use>
                            </svg>
                            <div class="name">时钟</div>
                            <div class="code-name">#icon-shizhong</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-yinhangqia1"></use>
                            </svg>
                            <div class="name">48银行卡</div>
                            <div class="code-name">#icon-yinhangqia1</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-morentouxiang"></use>
                            </svg>
                            <div class="name">默认头像</div>
                            <div class="code-name">#icon-morentouxiang</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-xueli"></use>
                            </svg>
                            <div class="name">学历</div>
                            <div class="code-name">#icon-xueli</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-guanbi2"></use>
                            </svg>
                            <div class="name">关闭2</div>
                            <div class="code-name">#icon-guanbi2</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-guanbixiao"></use>
                            </svg>
                            <div class="name">关闭小</div>
                            <div class="code-name">#icon-guanbixiao</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-wj-jksq"></use>
                            </svg>
                            <div class="name">文件-借款申请</div>
                            <div class="code-name">#icon-wj-jksq</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-wj-zd"></use>
                            </svg>
                            <div class="name">文件-账单</div>
                            <div class="code-name">#icon-wj-zd</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-fenxiang"></use>
                            </svg>
                            <div class="name">分享</div>
                            <div class="code-name">#icon-fenxiang</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-daoru"></use>
                            </svg>
                            <div class="name">导入</div>
                            <div class="code-name">#icon-daoru</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-shuaxin"></use>
                            </svg>
                            <div class="name">刷新</div>
                            <div class="code-name">#icon-shuaxin</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-047-file"></use>
                            </svg>
                            <div class="name">文件</div>
                            <div class="code-name">#icon-047-file</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-image"></use>
                            </svg>
                            <div class="name">image</div>
                            <div class="code-name">#icon-image</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-JPEG"></use>
                            </svg>
                            <div class="name">JPEG</div>
                            <div class="code-name">#icon-JPEG</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-DOC"></use>
                            </svg>
                            <div class="name">DOC</div>
                            <div class="code-name">#icon-DOC</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-XLS"></use>
                            </svg>
                            <div class="name">XLS</div>
                            <div class="code-name">#icon-XLS</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-MP4"></use>
                            </svg>
                            <div class="name">MP4</div>
                            <div class="code-name">#icon-MP4</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-PNG"></use>
                            </svg>
                            <div class="name">PNG</div>
                            <div class="code-name">#icon-PNG</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-EXCEL"></use>
                            </svg>
                            <div class="name">EXCEL</div>
                            <div class="code-name">#icon-EXCEL</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-PPT"></use>
                            </svg>
                            <div class="name">PPT</div>
                            <div class="code-name">#icon-PPT</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-word"></use>
                            </svg>
                            <div class="name">word</div>
                            <div class="code-name">#icon-word</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-JPG"></use>
                            </svg>
                            <div class="name">JPG</div>
                            <div class="code-name">#icon-JPG</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-PDF"></use>
                            </svg>
                            <div class="name">PDF</div>
                            <div class="code-name">#icon-PDF</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-xiazai1"></use>
                            </svg>
                            <div class="name">下载</div>
                            <div class="code-name">#icon-xiazai1</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-tupiantianjia"></use>
                            </svg>
                            <div class="name">图片添加</div>
                            <div class="code-name">#icon-tupiantianjia</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-yinhanglogo-"></use>
                            </svg>
                            <div class="name">长沙银行</div>
                            <div class="code-name">#icon-yinhanglogo-</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-yinhang-jianshe"></use>
                            </svg>
                            <div class="name">银行-建设</div>
                            <div class="code-name">#icon-yinhang-jianshe</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-yinhang-jiaotong"></use>
                            </svg>
                            <div class="name">银行-交通</div>
                            <div class="code-name">#icon-yinhang-jiaotong</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-yinhang-nonghang"></use>
                            </svg>
                            <div class="name">银行-农行</div>
                            <div class="code-name">#icon-yinhang-nonghang</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-yinhang-zhongguoyinhang"></use>
                            </svg>
                            <div class="name">银行-中国银行</div>
                            <div class="code-name">#icon-yinhang-zhongguoyinhang</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-yinhang-gongshang"></use>
                            </svg>
                            <div class="name">银行-工商</div>
                            <div class="code-name">#icon-yinhang-gongshang</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-yinhang-zhaoshang"></use>
                            </svg>
                            <div class="name">银行-招商</div>
                            <div class="code-name">#icon-yinhang-zhaoshang</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-qiye"></use>
                            </svg>
                            <div class="name">企业</div>
                            <div class="code-name">#icon-qiye</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-houtaiguanliyuan"></use>
                            </svg>
                            <div class="name">后台管理员</div>
                            <div class="code-name">#icon-houtaiguanliyuan</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-qiye2"></use>
                            </svg>
                            <div class="name">企业2</div>
                            <div class="code-name">#icon-qiye2</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-ceshirenyuan"></use>
                            </svg>
                            <div class="name">测试人员</div>
                            <div class="code-name">#icon-ceshirenyuan</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-a-ceshirenyuan2"></use>
                            </svg>
                            <div class="name">测试人员 2</div>
                            <div class="code-name">#icon-a-ceshirenyuan2</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-houtaiguanliyuan2"></use>
                            </svg>
                            <div class="name">后台管理员2</div>
                            <div class="code-name">#icon-houtaiguanliyuan2</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-gengduo"></use>
                            </svg>
                            <div class="name">更多</div>
                            <div class="code-name">#icon-gengduo</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-19"></use>
                            </svg>
                            <div class="name">更多</div>
                            <div class="code-name">#icon-19</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-qiehuan"></use>
                            </svg>
                            <div class="name">切换</div>
                            <div class="code-name">#icon-qiehuan</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-wenhao-xianxingyuankuang"></use>
                            </svg>
                            <div class="name">306问号-线性圆框</div>
                            <div class="code-name">#icon-wenhao-xianxingyuankuang</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-shanchu2"></use>
                            </svg>
                            <div class="name">删除2</div>
                            <div class="code-name">#icon-shanchu2</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-xinzeng"></use>
                            </svg>
                            <div class="name">新增</div>
                            <div class="code-name">#icon-xinzeng</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-sousuoxiao"></use>
                            </svg>
                            <div class="name">搜索小</div>
                            <div class="code-name">#icon-sousuoxiao</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-daochu"></use>
                            </svg>
                            <div class="name">导出</div>
                            <div class="code-name">#icon-daochu</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-shanchu"></use>
                            </svg>
                            <div class="name">删除</div>
                            <div class="code-name">#icon-shanchu</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-bianji"></use>
                            </svg>
                            <div class="name">KHCFDC_编辑</div>
                            <div class="code-name">#icon-bianji</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-xinzeng1"></use>
                            </svg>
                            <div class="name">新增</div>
                            <div class="code-name">#icon-xinzeng1</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use
                                    xlink:href="#icon-shezhixitongshezhigongnengshezhishuxing-xian"
                                ></use>
                            </svg>
                            <div class="name">137设置、系统设置、功能设置、属性-线</div>
                            <div class="code-name"
                                >#icon-shezhixitongshezhigongnengshezhishuxing-xian</div
                            >
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-shouye"></use>
                            </svg>
                            <div class="name">3.1首页</div>
                            <div class="code-name">#icon-shouye</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-jiaobiao"></use>
                            </svg>
                            <div class="name">jiaobiao</div>
                            <div class="code-name">#icon-jiaobiao</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-gouwuche"></use>
                            </svg>
                            <div class="name">购物车</div>
                            <div class="code-name">#icon-gouwuche</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-renliziyuanzhutifenxi"></use>
                            </svg>
                            <div class="name">人力资源主题分析</div>
                            <div class="code-name">#icon-renliziyuanzhutifenxi</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-zuzhijigou"></use>
                            </svg>
                            <div class="name">组织机构</div>
                            <div class="code-name">#icon-zuzhijigou</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-xiaoxi"></use>
                            </svg>
                            <div class="name">消息</div>
                            <div class="code-name">#icon-xiaoxi</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-yinhangqia"></use>
                            </svg>
                            <div class="name">银行卡</div>
                            <div class="code-name">#icon-yinhangqia</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-zijin"></use>
                            </svg>
                            <div class="name">资金</div>
                            <div class="code-name">#icon-zijin</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-more"></use>
                            </svg>
                            <div class="name">more</div>
                            <div class="code-name">#icon-more</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-hangzhengchufa"></use>
                            </svg>
                            <div class="name">行政处罚</div>
                            <div class="code-name">#icon-hangzhengchufa</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-chanpin"></use>
                            </svg>
                            <div class="name">产品</div>
                            <div class="code-name">#icon-chanpin</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-shuoming"></use>
                            </svg>
                            <div class="name">说明</div>
                            <div class="code-name">#icon-shuoming</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-pingtaiguanli"></use>
                            </svg>
                            <div class="name">平台管理</div>
                            <div class="code-name">#icon-pingtaiguanli</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-xuanzhongjiaobiao"></use>
                            </svg>
                            <div class="name">选中角标</div>
                            <div class="code-name">#icon-xuanzhongjiaobiao</div>
                        </li>
                    </ul>
                    <div class="article markdown">
                        <h2 id="symbol-">Symbol 引用</h2>
                        <hr />

                        <p
                            >这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a
                                href=""
                                >文章</a
                            >
                            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p
                        >
                        <ul>
                            <li>支持多色图标了，不再受单色限制。</li>
                            <li
                                >通过一些技巧，支持像字体那样，通过 <code>font-size</code>,
                                <code>color</code> 来调整样式。</li
                            >
                            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
                            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
                        </ul>
                        <p>使用步骤如下：</p>
                        <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
                        <pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
                        <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
                        <pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
                        <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
                        <pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
                    </div>
                </div>
            </div>
        </div>
        <script>
            $(document).ready(function () {
                $('.tab-container .content:first').show();

                $('#tabs li').click(function (e) {
                    var tabContent = $('.tab-container .content');
                    var index = $(this).index();

                    if ($(this).hasClass('active')) {
                        return;
                    } else {
                        $('#tabs li').removeClass('active');
                        $(this).addClass('active');

                        tabContent.hide().eq(index).fadeIn();
                    }
                });
            });
        </script>
    </body>
</html>
